<template>
	<view class="card-detail">
		<view class="top">
			<card-pack-item :data="data" showQrcode />

			<u-row :gutter="20" v-if="data.type != 2">
				<u-col :span="6">
					<view class="box text-center">
						<view class="number">{{data.else_text}}</view>
						<view>剩余额度</view>
					</view>
				</u-col>
				<u-col :span="6">
					<view class="box text-center" v-if="data.cardstate == 1">
						<view class="number">--</view>
						<view>剩余使用天数</view>
					</view>
					<view class="box text-center" v-if="data.cardstate == 2">
						<view class="number">{{data.elseDays}}</view>
						<view>剩余使用天数</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-tabs :list="list6" :scrollable="false" @click="clicks"></u-tabs>
		<!-- 消费记录 -->
		<u-cell-group v-if="xiaofei">
			<u-cell v-for="item in recordList" :key="item.id" :index="item.id">
				<view slot="title">
					<view class="name" style="color: #4f58ff">充值记录</view>
					<view class="date">{{ item.created_at }}</view>
				</view>
				<!-- 计次卡 -->
				<view slot="value" class="text-right" >
					<view class="number" style="color: #4f58ff"><text>+</text> {{ item.times }}<text style="color: #ff0000;">赠{{ item.gift_times}}</text></view>
					<view class="rest">剩余:{{ item.else_times }}次</view>
				</view>
				
			</u-cell>
		</u-cell-group>
		<!-- 我的档案袋 & 其他端口 -->
		<!-- <block v-for="(item,index) in list" > -->
		<zqBox v-model="scrollTop" v-if="kapian">
			<view class="menu-cates">
				<view class="menu-cate-item_s" @click="onClickMenu(0)">
					<view class="pr flex-center flex-column">
						<u-image :src="`${assetsPath}55c185face7284557a4d1d488707f888f3aaa1b0.png`" width="90rpx"
							height="90rpx" />
						<text style="margin-top: 10rpx;">续充</text>
					</view>
				</view>
				<!-- <view class="menu-cate-item_s" @click="onClickMenu(8)" v-if="data.cardstate == 3">
					<view class="pr flex-center flex-column">
						<u-image :src="`${assetsPath}0adf9dc505ec328beccf5e0ed13291e3c59ad987.png`" width="90rpx"
							height="90rpx" />
						<text style="margin-top: 10rpx;">解挂</text>
					</view>
				</view>
				<view class="menu-cate-item_s" @click="onClickMenu(1)" v-else>
					<view class="pr flex-center flex-column">
						<u-image :src="`${assetsPath}0adf9dc505ec328beccf5e0ed13291e3c59ad987.png`" width="90rpx"
							height="90rpx" />
						<text style="margin-top: 10rpx;">挂失</text>
					</view>
				</view>

				<view class="menu-cate-item_s" @click="onClickMenu(2)">
					<view class="pr flex-center flex-column">
						<u-image :src="`${assetsPath}99b1a3877fc0f9dd8527259dfa5dc1912ef66c16.png`" width="90rpx"
							height="90rpx" />
						<text style="margin-top: 10rpx;">转移</text>
					</view>
				</view>
				<view class="menu-cate-item_s" @click="onClickMenu(3)">
					<view class="pr flex-center flex-column">
						<u-image :src="`${assetsPath}9b3369b45123048582bb93cc91e2eebcaed4cf93.png`" width="90rpx"
							height="90rpx" />
						<text style="margin-top: 10rpx;">延期</text>
					</view>
				</view>
				<view class="menu-cate-item_s" @click="onClickMenu(4)">
					<view class="pr flex-center flex-column">
						<u-image :src="`${assetsPath}f2f3bd252aa42561264d53561b7a1e08973ffd24.png`" width="90rpx"
							height="90rpx" />
						<text style="margin-top: 10rpx;">转让</text>
					</view>
				</view>
				<view class="menu-cate-item_s" @click="onClickMenu(5)">
					<view class="pr flex-center flex-column">
						<u-image :src="`${assetsPath}0adb2e9c34f2584a114adbcfd30da76437d733a7.png`" width="90rpx"
							height="90rpx" />
						<text style="margin-top: 10rpx;">充值记录</text>
					</view>
				</view>
				<view class="menu-cate-item_s" @click="onClickMenu(6)">
					<view class="pr flex-center flex-column">
						<u-image :src="`${assetsPath}7791562f4d0afe050feb9ee6efff491072a5b4b9.png`" width="90rpx"
							height="90rpx" />
						<text style="margin-top: 10rpx;">分享</text>
					</view>
				</view>
				<view class="menu-cate-item_s" @click="onClickMenu(7)">
					<view class="pr flex-center flex-column">
						<u-image :src="`${assetsPath}71430e79a08eb1216653e4f6b1c89150f6f4c2cd.png`" width="90rpx"
							height="90rpx" />
						<text style="margin-top: 10rpx;">保证金</text>
					</view>
				</view>
				<view class="menu-cate-item_s" @click="onClickMenu(9)">
					<view class="pr flex-center flex-column">
						<u-image :src="`${assetsPath}105ab98a5cc57b3159cbabc882ebb6faa7fed10b.png`" width="90rpx"
							height="90rpx" />
						<text style="margin-top: 10rpx;">别名</text>
					</view>
				</view> -->
			</view>
		</zqBox>
		<!-- </block> -->
		<!-- 挂失/解挂 -->
		<div class="vueMdelBox">
			<div :hidden="vueShowModel" class="vueContant">
				<div class="vueTitle">{{title}}</div>
				<div class="vueDetail">
					<u-tag v-for="(item2,index2) in data_specs" :key="index2" :text="item2.name" type="warning"
						:bgColor="
					    data_name.indexOf(item2) > -1
					      ? '#2F75FA'
					      : '#EFEFEF'
					  " :borderColor="
					    data_name.indexOf(item2) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
					  " :color="data_name.indexOf(item2) > -1 ? '#ffffff' : '#333'" @click="data_specss(item2,index2)" size="large" />

				</div>
				<view class="" style="width: 80%;height: auto;margin-left: 10%;">
					<u-textarea v-model="content" placeholder="请输入挂失理由" border="none" height="100"></u-textarea>
				</view>
				<div class="vueBtn">
					<u-button text="我再想想" shape="circle" size="small"
						color="linear-gradient(0deg, rgb(211, 211, 211) 0%, rgb(211, 211, 211) 65%)"
						@click="cancel()"></u-button>
					<u-button text="确认挂失" shape="circle" size="small"
						color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 65%)"
						@click="cancellist()"></u-button>
				</div>
			</div>
			<div class="vueBgdCol" :hidden="vueShowModel" @click="setting()"></div>
		</div>
		<!-- 挂失/解挂 -->
		<div class="vueMdelBox">
			<div :hidden="vueShowModels" class="vueContants">
				<div class="vueTits">{{titles}}</div>

				<div class="vueBtns">
					<u-button text="不解挂" shape="circle" size="small"
						color="linear-gradient(0deg, rgb(211, 211, 211) 0%, rgb(211, 211, 211) 65%)" @click="canlist()">
					</u-button>
					<u-button text="解挂" shape="circle" size="small"
						color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 65%)" @click="cellist()">
					</u-button>
				</div>
			</div>
			<div class="vueBgdCol" :hidden="vueShowModels" @click="settings()"></div>
		</div>
		<view v-if="tanc"
			style="width: 750rpx; top: 0;height: 100%;background: rgba(51,51,51,0.6);position: absolute;z-index: 99;">
		
		</view>
		<view v-if="tanc" class=""
			style="width: 560rpx;top: 20%;left: 13%;height: 400rpx;background: #FFFFFF;border-radius: 28rpx 28rpx 28rpx 28rpx;position: absolute;z-index: 999;">
			<view class="" style="width: 160rpx;
		height: 46rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 46rpx;margin: 0 auto;margin-top: 30rpx;">
				修改别名
			</view>
			<input type="text" placeholder="别名名称" v-model="textadd" style="margin-top: 80px;    padding: 0 100rpx;
		    padding-left: 32%;">
			<view class="" style="width: 400rpx;margin: 0 auto;margin-top: 20rpx;height: 2rpx;
		background: #A8A8A8;">

			</view>
		</view>
		<button v-if="tanc" class="submit_xiugai" style="width: 440upx;
			display: block;
			border-radius: 80upx;
			background: #0E9698;
			position: absolute;
			z-index: 999;
			top: 55%;
			left: 19%;" type="primary" @click="queding">修 改</button>
		<image v-if="tanc" style="width: 52rpx;height: 52rpx;position: absolute;z-index: 999;top:66%;
					left: 45%;" src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/af84405e31d22037f48a2d2387e69987a8071b6d.png" mode="" @click="guanbiclick"></image>
	</view>
</template>

<script>
	import cardPackItem from './components/card-pack-item.vue'
	// const index = require('@/api/personal/index.js')
	export default {
		components: {
			cardPackItem
		},
		data() {
			return {
				tanc: false,
				assetsPath: this.$https.assetsPath,
				data: {
					address: '衡阳奥星',
					name: '篮球充值卡',
					number: '2565 8888',
					balance: 1368,
					unit: '元',
					date: '2021/12/31'
				},
				recordList: [{
						id: 1,
						goods_name: '转给:李达',
						created_at: '2020/12/12 12:12:12',
						else_times: '2',
						rest: '5340',
						gift_times:'0',
						times:20
					},
					{
						id: 2,
						goods_name: '转给:李达',
						created_at: '2020/12/12 12:12:12',
						else_times: '¥200',
						gift_times:'1',
						times:20
					}
				],
				cardno: '',
				list6: [{
					name: '卡片服务'
				}, {
					name: '消费记录',
				}],
				xiaofei: false,
				kapian: true,
				cardno: "",
				vueShowModel: true, //默认不显示
				vueShowModels: true, //默认不显示
				data_specs: [{
						checked: true,
						name: "丢失",
						ticket_id: "77",
					},
					{
						checked: false,
						name: "被盗",
						ticket_id: "77",
					},
					{
						checked: false,
						name: "其他",
						ticket_id: "77",
					}
				],
				data_name: [],
				title: '标题',
				titles: '是否将此卡解除挂失',
				// recordList: [],
				card_id: '',
				content: '',
				textadd:'',
				data: {
						account_balance: null,
						alias_name: "",
						autoopendate: "2023-06-10 00:00:00",
						card_id: 415,
						cardno: "B1120230609135727678",
						cardstate: 2,
						cardtype: 1,
						consumption_type: [],
						currency: "0.00",
						else_text: "41次",
						enddate: "0000-00-00",
						goods_image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/da/d42c864f45a5cd9054d289a0461231.png?attname=%E7%BB%847%402x.png",
						goods_name: "游泳50次卡6.8",
						id: 788,
						is_yxq: null,
						last_disabled_date: null,
						left_time: null,
						leftnum: 41,
						order_item_id: "6976",
						product_id: 415,
						recharge_amount: "42.00",
						specify: "",
						startdate: "0000-00-00",
						starttime: "2023-06-09 13:57:27",
						type: 1,
						venue_name: "苏州市体育中心",
						venue_thumb: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/ab/eb19425d9b932cc78947031a234757.png?attname=%E4%BD%93%E8%82%B2%E4%B8%AD%E5%BF%83%E8%AF%A6%E6%83%85+%282%29.png",
						yxq: "长期有效",
					},
				
			}
		},
		onLoad(options) {
			this.cardno = options.cardno
			// this.getMyCardDetail()
		},
		methods: {
			guanbiclick(){
				this.tanc = false
			},
			queding() {
				let params = {
					project_id: getApp().globalData.projectId,
					appid: this.$https.weixinAppId,
					id:this.card_id,
					alias_name:this.textadd
				}
				index.alias_name(params).then(res => {
					if (res.code === 1) {
						this.tanc = false
					}
				})
				
			},
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			data_specss(item2, index2) {
				this.title = item2.name
				this.content = item2.name
				this.chooseStock = 0
				this.data_name = []
				this.namedata = item2.name
				this.ticket_id = item2.ticket_id
				let data_name = []
				this.data_specs.forEach(item => {
					data_name.push(item)
				})
				data_name.some((item, index) => {
					if (item == item2) {
						this.data_name[index] = item2;
						this.$forceUpdate();
					}
				});

				this.data_specs.map((item, index) => {
					item.checked = index === index2 ? true : false
				})

			},
			// 点击按钮打开弹框
			vueToMdel() {
				this.vueShowModel = false;
			},
			// 点击蒙版按钮模态框消失
			setting() {
				this.vueShowModel = true;
			},
			settings() {
				this.vueShowModels = true;
			},
			// 点击取消按钮模态框消失
			cancel() {
				this.vueShowModel = true;
			},
			cancellist() {
				this.vueShowModel = true;
			},
			canlist() {
				this.vueShowModels = true;
			},
			cellist() {
				this.vueShowModels = true;
			},

			// 点击确定按钮模态框消失
			confirm() {
				this.vueShowModel = true;
			},
			clicks(item) {
				if (item.index == 0) {
					this.xiaofei = false
					this.kapian = true
				} else if (item.index == 1) {
					// this.getMoneyRecord(this.card_id)
					this.xiaofei = true
					this.kapian = false
				}
			},
			onClickMenu(item) {
				let that = this
				if (item == "0") {
					uni.navigateTo({
						url: './deteil'
					})
					// uni.showToast({
					// 	title: '敬请期待',
					// 	icon:'exception',
					// 	duration:850
					// });
				}
				if (item == "1") {
					uni.navigateTo({
						url: '/pages_other/cardbag/card_cancellation?cardno=' + this.cardno
					})
				}
				if (item == "2") {
					if (this.data.type != 2) {
						uni.navigateTo({
							url: '/pages_other/cardbag/card_transfer?cardno=' + this.cardno
						})
					}
				}
				if (item == "3") {
					// uni.navigateTo({
					// 	url: '/pages_other/cardbag/card_delay?cardno=' + this.cardno
					// })
					uni.showToast({
						title: '敬请期待',
						icon: 'exception',
						duration: 850
					});
				}
				if (item == "4") {
					// if (this.data.type != 2) {
					// 	uni.navigateTo({
					// 		url: '/pages_other/cardbag/card_possession?cardno=' + this.cardno
					// 	})
					// }
					uni.showToast({
						title: '敬请期待',
						icon: 'exception',
						duration: 850
					});
				}
				if (item == "5") {
					uni.navigateTo({
						url: '/pages_other/cardbag/card_record?card_id=' + this.card_id
					})
				}
				if (item == "8") {
					// this.vueShowModels = false;
					uni.showModal({
						title: '是否将此卡解除挂失!',
						// 提示文字
						// content: '是否取消订单？',
						// 取消按钮的文字自定义
						cancelText: "取消",
						// 确认按钮的文字自定义
						confirmText: "确定",
						//删除字体的颜色 
						confirmColor: '#000000',
						//取消字体的颜色
						cancelColor: '#999',
						success: function(res) {
							if (res.confirm) {
								let datas = {
									app_id: that.$https.weixinAppId,
									project_id: getApp().globalData.projectId,
									id: that.data.id
								};
								index.unlost(datas).then(result => {
									if (result.code == 1) {
										that.getMyCardDetail()
									}
								})
							}
						}
					})
				}
				
				if (item == "9") {
					this.tanc = true
				}
				// if (item.id == "6") {
				// 	uni.navigateTo({
				// 		url: '/pages_other/cardbag/card_share' 
				// 	})
				// }
				// if (item.url) {
				// 	uni.navigateTo({
				// 		url: item.url+ "&cardno=" + this.cardno
				// 	});
				// }
			},

			// 获取卡消费记录
			async getMoneyRecord(card_id) {
				let params = {
					card_id: card_id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
				}
				let res = await index.getMoneyRecord(params)
				if (res.code === 1) {
					this.recordList = res.data.result
				}
			},

			// 获取我的卡包详情
			async getMyCardDetail() {
				let params = {
					cardno: this.cardno,
					project_id: getApp().globalData.projectId,
					user_id: uni.getStorageSync('phone'),
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
				}
				let res = await index.getMyCardDetail(params)
				if (res.code === 1) {
					this.data = res.data.cardData
					let card_id = res.data.cardData.id
					this.card_id = res.data.cardData.id
				}
			},
		}
	}
</script>

<style lang="scss" scoped>

	.card-detail {
		padding-bottom: env(safe-area-inset-bottom);

		.top {
			padding: 30rpx;
		}

		.vueBgdCol {
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 0.8;
			opacity: 0.8;
			filter: alpha(opacity=88);
		}

		.vueContant {
			position: fixed;
			top: 40%;
			left: 52.5%;
			width: 600rpx;
			height: 600rpx;
			margin-left: -320rpx;
			margin-top: -76px;
			background-color: white;
			z-index: 1002;
			overflow: auto;
			border-radius: 20rpx;
		}

		.vueTitle {
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			padding-top: 22rpx;
			font-weight: 600;
		}

		.vueContants {
			position: fixed;
			top: 40%;
			left: 50%;
			width: 600rpx;
			height: 330rpx;
			margin-left: -320rpx;
			margin-top: -76px;
			background-color: white;
			z-index: 1002;
			overflow: auto;
			border-radius: 20rpx;
		}

		.vueTits {
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			padding-top: 75rpx;
			font-weight: 600;
		}

		.vueDetail {
			font-size: 28rpx;
			color: #646566;
			display: flex;
			// justify-content: center;
			padding: 32rpx;
			height: 48rpx;
			margin-right: 20rpx;
		}

		/deep/.u-tag {
			margin-left: 20rpx;

		}

		/deep/.u-textarea {
			background-color: #f3f3f3;
			margin-top: 80rpx;
		}

		/deep/.u-button {
			width: 40%;
			height: 80rpx;
		}

		.vueBtn {
			display: flex;
			margin-top: 50rpx;
		}

		.vueBtns {
			display: flex;
			margin-top: 80rpx;
		}

		.vueBtn span {
			width: 320rpx;
			height: 96rpx;
			font-size: 24rpx;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.vueBtn span:first-child {
			border-top: 1px solid #ebedf0;
		}

		.vueBtn span:last-child {
			color: #ee0a24;
			border-top: 1px solid #ebedf0;
			border-left: 1px solid #ebedf0;
		}


		/deep/.u-row {
			margin-top: 40rpx;

			.box {
				border-radius: 12rpx;
				background-color: #f3f3f3;
				padding: 40rpx 0;

				.number {
					color: #2f75fa;
					margin-bottom: 40rpx;
					font-weight: bold;
				}
			}
		}

		/deep/.u-cell-group {
			.name {
				color: #333;
				font-weight: bold;
			}

			.number {
				color: #ff4105;
			}

			.date {
				color: #ccc;
			}

			.rest {
				color: #9c9c9c;
			}

			.rest,
			.date {
				margin-top: 14rpx;
				font-size: 26rpx;
			}
		}
		.bubble-back {
			width: 100%;
			height: 400rpx;
			position: relative;
		}
		
		.user-info {
			position: absolute;
			width: 100%;
			top: 0;
			display: flex;
			padding: 30rpx 0rpx 30rpx 30rpx ;
		}
		
		.user-info-center-one /deep/ .u-text {
			padding-right: 20rpx;
		}
		
		.user-info-center-one,
		.user-info-center-two /deep/ .u-text {
			padding-bottom: 15rpx;
		}
		
		.user-info-center-three .text {
			flex: 0 !important;
			white-space: nowrap;
		}
		
		.user-info-center-three /deep/ .u-text {
			margin-left: 6rpx !important;
		}
		
		.user-info-center-three /deep/ .text:not(:first-of-type) {
			margin-left: 30rpx;
		}
		
		.user-info-left {
			padding-right: 30rpx;
		}
		
		.user-info-left-label {
			position: absolute;
			left: 67rpx;
			top: 160rpx;
		}
		
		.user-info-left-label .u-tag {
			height: 30rpx !important;
			line-height: 30rpx !important;
		}
		
		.my-menu{
			position: absolute;
			top: 240rpx;
			left: 50%;
			transform: translate(-50%);
		}
		
		.cates {
			display: flex;
			justify-content: center;
			position: absolute;
			top: 50%;
			left: 30rpx;
			transform: translateY(-50%);
		}
		
		.cate-item {
			width: 126rpx;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		.cate-item text {
			margin-top: 10rpx;
		}
		
		
		.my-menu-content-something{
			display: flex;
		}
		
		.my-menu-content{
			margin-top: 30rpx;
			color: rgb(51,51,51);
			font-size: 26rpx;
			font-weight: 500;
			white-space: nowrap;
			display: block;
		}
		
		.my-menu-image{
			margin-left: auto;
			margin-right: 20rpx;
		}
		
		.my-menu-title{
			color: rgb(51,51,51);
			font-size: 32rpx;
			font-weight: 700;
			white-space: nowrap;
		}
		.my-menu-title .title {
			position: relative;
			z-index: 1;
		}
		.my-menu-title .title::before {
			content: '';
			width: 12rpx;
			height: 12rpx;
			position: absolute;
			left: -10rpx;
			top: -10rpx;
			background-color: #c1d5fc;
			border-radius: 50%;
			border: 1px solid #5d95ff;
		}
		.my-menu-title .box {
			display: inline-block;
			background-color: rgb(47,117,250);
			width: 13rpx;
			height: 30rpx;
			transform: translate(-4rpx, 2rpx);
		}
		
		.menu-cates{
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			margin-top: 30rpx;
		}
		
		.menu-cate-item{
			width: 25%;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.menu-cate-item_s{
			width: 33.3%;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;
			margin-top: 20rpx;
		}
		
		.orders .menu-cate-item {
			width: 25%;
			margin: 0 !important;
		}
		
		.menu-cate-item .u-image {
			margin-bottom: 10rpx;
		}
		
		.menu-cate-item:not(:nth-of-type(-n + 4)) {
			margin-top: 30rpx;
		}
		
		.u-cell-group {
			
			background-color: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: 0px 13rpx 57rpx rgba(8,73,162,0.11);
			overflow: hidden;
		}
		
		.u-cell-group .u-cell-group__wrapper > .u-line,
		.u-cell-group .u-cell:last-of-type > .u-line {
			display: none;
		}
		
		.u-cell-group .u-cell__body {
			height: 110rpx;
		}
		
		.zq-box {
			box-shadow: 0px 13rpx 57rpx rgba(8,73,162,0.11) !important;
		}
		
		.b-image{
			margin: 20rpx;
		}
	}
</style>